<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${article.title} + ' - 回声网络'"></title>
    <style>
        .container { width: 900px; margin: 50px auto; }
        .article-header { margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
        .article-title { font-size: 28px; margin-bottom: 15px; }
        .article-meta { color: #666; font-size: 14px; }
        .article-content { line-height: 2; font-size: 16px; margin: 30px 0; }
        .article-content img { max-width: 100%; margin: 15px 0; }
        .article-content pre { background: #f8f9fa; padding: 15px; border-radius: 4px; overflow-x: auto; }
        .btn-back { background: #6c757d; color: white; border: none; padding: 12px 20px; cursor: pointer; margin-bottom: 20px; text-decoration: none; display: inline-block; }
        .btn-back:hover { background: #5a6268; }
        .comment-section { margin-top: 50px; padding-top: 30px; border-top: 1px solid #eee; }
        .comment-title { font-size: 20px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
        .comment-form { margin-bottom: 30px; }
        textarea.comment-content { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; height: 120px; resize: vertical; }
        textarea.reply-content { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; height: 80px; resize: vertical; margin-bottom: 8px; }
        .btn-submit-comment { background: #007bff; color: white; border: none; padding: 10px 20px; cursor: pointer; margin-top: 10px; border-radius: 4px; }
        .btn-submit-comment:hover { background: #0056b3; }
        .btn-reply { background: #6c757d; color: white; border: none; padding: 5px 10px; cursor: pointer; font-size: 12px; border-radius: 3px; margin-left: 10px; }
        .btn-reply:hover { background: #5a6268; }
        .comment-list { margin-bottom: 30px; }
        .comment-item { border: 1px solid #eee; border-radius: 8px; padding: 15px; margin-bottom: 15px; background: #fff; }
        .comment-meta { display: flex; justify-content: space-between; color: #666; font-size: 14px; margin-bottom: 10px; }
        .comment-body { color: #333; line-height: 1.6; margin-bottom: 10px; }
        .reply-form { margin-top: 15px; padding-top: 15px; border-top: 1px solid #f0f0f0; }
        .replies-container { margin-top: 15px; margin-left: 30px; padding-left: 20px; border-left: 2px solid #f0f0f0; }
        .reply-item { padding: 10px; background: #f8f9fa; border-radius: 6px; margin-bottom: 10px; }
        .reply-meta { color: #666; font-size: 12px; margin-bottom: 5px; }
        .reply-body { color: #333; font-size: 14px; line-height: 1.5; }
        .pagination { display: flex; list-style: none; padding: 0; margin: 20px 0; justify-content: center; }
        .pagination li { margin: 0 5px; }
        .pagination a { display: block; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #007bff; }
        .pagination a.active { background: #007bff; color: white; border-color: #007bff; }
        .no-comment { text-align: center; color: #666; padding: 30px 0; }
        .comment-count { font-size: 16px; color: #666; }
        .error-message { color: #dc3545; margin-bottom: 10px; }
        .success-message { color: #28a745; margin-bottom: 10px; }
    </style>
</head>
<body>
<div class="container">
    <!-- 返回按钮 -->
    <a href="/echo-network/article-list" class="btn-back">返回列表</a>
    
    <!-- 文章主体 -->
    <div class="article-header">
        <h1 class="article-title" th:text="${article.title}"></h1>
        <div class="article-meta">
            作者：<span th:text="${article.authorUsername}"></span> ·
            发布时间：<span th:text="${article.createTime}"></span>
            <span th:if="${article.categories != null and not article.categories.empty}"> · 
                分类：
                <span th:each="category, status : ${article.categories}">
                    <a th:href="'/echo-network/article-list?categoryId=' + ${category.categoryId}" th:text="${category.categoryName}" style="color: #3498db; text-decoration: none;"></a>
                    <span th:if="${not status.last}">、</span>
                </span>
            </span>
        </div>
    </div>

    <div class="article-content" th:utext="${article.htmlContent}"></div>

    <!-- 评论区 -->
    <div class="comment-section">
        <h2 class="comment-title">
            评论区
            <span class="comment-count" th:text="'(共' + ${totalComments} + '条评论)'"></span>
        </h2>

        <!-- 消息提示 -->
        <div class="error-message" th:if="${errorMessage != null}" th:text="${errorMessage}"></div>
        <div class="success-message" th:if="${successMessage != null}" th:text="${successMessage}"></div>

        <!-- 评论表单（仅登录用户可见） -->
        <form class="comment-form" action="/echo-network/comment" method="post" th:if="${session.loginUser != null}">
            <input type="hidden" name="action" value="add">
            <input type="hidden" name="articleId" th:value="${article.id}">
            <input type="hidden" name="parentId" value="0">
            <textarea class="comment-content" name="content" required placeholder="请输入你的评论（不超过500字）" maxlength="500"></textarea>
            <button type="submit" class="btn-submit-comment">提交评论</button>
        </form>
        <p th:unless="${session.loginUser != null}" style="color: #666;">
            <a href="/echo-network/login.html">登录后</a >即可发表评论～
        </p >

        <!-- 评论列表 -->
        <div class="comment-list" th:if="${not comments.isEmpty()}">
            <div th:each="comment : ${comments}">
                <div class="comment-item">
                    <div class="comment-meta">
                        <span th:text="${comment.username}"></span>
                        <div>
                            <span th:text="${comment.createTime}"></span>
                            <button class="btn-reply" th:onclick="'showReplyForm(\'reply-form-' + ${comment.id} + '\')'">回复</button>
                            <!-- 删除按钮：当登录用户是评论作者或管理员时显示 -->
                    <button class="btn-delete" th:if="${session.loginUser != null and (session.loginUser.id == comment.userId or session.loginUser.role == 1)}" 
                        th:onclick="'confirmDeleteComment(' + ${comment.id} + ', ' + ${article.id} + ')'" style="margin-left: 10px; background: #dc3545; color: white; border: none; padding: 5px 10px; cursor: pointer; font-size: 12px; border-radius: 3px;">删除</button>
                        </div>
                    </div>
                    <div class="comment-body" th:text="${comment.content}"></div>
                    
                    <!-- 回复表单 -->
                    <div class="reply-form" th:id="'reply-form-' + ${comment.id}" style="display: none;">
                        <form action="/echo-network/comment" method="post" th:if="${session.loginUser != null}">
                            <input type="hidden" name="action" value="add">
                            <input type="hidden" name="articleId" th:value="${article.id}">
                            <input type="hidden" name="parentId" th:value="${comment.id}">
                            <textarea class="reply-content" name="content" required placeholder="请输入你的回复（不超过300字）" maxlength="300"></textarea>
                            <div style="display: flex; justify-content: flex-end;">
                                <button type="button" class="btn-reply" th:onclick="'hideReplyForm(\'reply-form-' + ${comment.id} + '\')'">取消</button>
                                <button type="submit" class="btn-submit-comment">提交回复</button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies-container" th:if="${comment.replies != null and not comment.replies.isEmpty()}">
                        <div th:each="reply : ${comment.replies}">
                            <div class="reply-item">
                                <div class="reply-meta">
                                    <span th:text="${reply.username}"></span> 回复 <span th:text="${comment.username}"></span>
                                    <span th:text="${reply.createTime}"></span>
                                    <!-- 删除按钮：当登录用户是回复作者或管理员时显示 -->
                                <button class="btn-delete" th:if="${session.loginUser != null and (session.loginUser.id == reply.userId or session.loginUser.role == 1)}" 
                                    th:onclick="'confirmDeleteComment(' + ${reply.id} + ', ' + ${article.id} + ')'" style="margin-left: 10px; background: #dc3545; color: white; border: none; padding: 3px 8px; cursor: pointer; font-size: 10px; border-radius: 2px;">删除</button>
                                </div>
                                <div class="reply-body" th:text="${reply.content}"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 无评论提示 -->
        <div class="no-comment" th:if="${comments.isEmpty()}">
            暂无评论，快来抢沙发～
        </div>

        <!-- 评论分页（总页数>1时显示） -->
        <div th:if="${totalPages > 1}">
            <div style="text-align: center; margin-bottom: 10px; color: #666; font-size: 14px;">
                第 <span th:text="${currentPage}"></span> 页，共 <span th:text="${totalPages}"></span> 页
            </div>
            <ul class="pagination">
                <li th:if="${currentPage > 1}">
                    <a th:href="'/echo-network/article-detail?id=' + ${article.id} + '&commentPage=' + ${currentPage-1}">上一页</a>
                </li>
                <!-- 使用简单的循环替代numbers.sequence -->
                <li th:each="page : ${pageNumbers}">
                    <a th:href="'/echo-network/article-detail?id=' + ${article.id} + '&commentPage=' + ${page}"
                       th:class="${page == currentPage ? 'active' : ''}"
                       th:text="${page}"></a>
                </li>
                <li th:if="${currentPage < totalPages}">
                    <a th:href="'/echo-network/article-detail?id=' + ${article.id} + '&commentPage=' + ${currentPage+1}">下一页</a>
                </li>
            </ul>
        </div>
    </div>
</div>
    <script>
        // 显示回复表单
        function showReplyForm(formId) {
            // 先隐藏所有回复表单
            const allReplyForms = document.querySelectorAll('.reply-form');
            allReplyForms.forEach(form => {
                form.style.display = 'none';
            });
            // 显示当前回复表单
            const form = document.getElementById(formId);
            if (form) {
                form.style.display = 'block';
                // 自动聚焦到回复文本框
                const textarea = form.querySelector('textarea');
                if (textarea) {
                    textarea.focus();
                }
            }
        }
        
        // 隐藏回复表单
        function hideReplyForm(formId) {
            const form = document.getElementById(formId);
            if (form) {
                form.style.display = 'none';
            }
        }
        
        // 删除评论确认
        function confirmDeleteComment(commentId, articleId) {
            if (confirm('确定要删除这条评论吗？删除后将无法恢复。')) {
                // 构造删除请求URL
                const deleteUrl = '/echo-network/comment?action=delete&id=' + commentId + '&articleId=' + articleId;
                // 提交删除请求
                window.location.href = deleteUrl;
            }
        }
        
        // 页面加载时处理
        document.addEventListener('DOMContentLoaded', function() {
            // 检查URL参数中是否有回复相关的提示
            const urlParams = new URLSearchParams(window.location.search);
            const replySuccess = urlParams.get('replySuccess');
            const commentSuccess = urlParams.get('commentSuccess');
            
            // 滚动到评论区（如果有回复或评论成功的提示）
            if (replySuccess === 'true' || commentSuccess === 'true') {
                const commentSection = document.querySelector('.comment-section');
                if (commentSection) {
                    commentSection.scrollIntoView({ behavior: 'smooth' });
                }
            }
        });
    </script>
</body>
</html>